<template>
	<view class="live-list" :class="config.style">
		<view class="header">
			<text class="title">{{params.title}}</text>
			<text class="more" @click="goToMoreLink()">查看更多</text>
		</view>
		<view class="list" :class="params.rank == 1 ? 'rank1':'rank0'">
			<!--小图-->
			<view :class="params.style == 1 ? 'style1':'style0'" v-if="params.style == 0">
				<view class="item" v-for="(item,index) in params.list" :key="index" @click="goToDetailLink(item.roomid)">
					<view class="content">
						<view class="cover">
							<!-- #ifdef MP || APP-PLUS -->
							<image mode="widthFix" :lazy-load="true" :src="item.share_img" class="image"></image>
							<!-- #endif -->  
							<!-- #ifdef H5 -->  
							<img class="image" v-lazy="item.share_img">  
							<!-- #endif --> 
						</view>
						<view class="info">
							<view class="title text-ellipsis-2">{{item.name}}</view>
							<view class="time-str">
								<view class="cn">开播时间</view>
								<view class="time">{{item.start_time_str}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--大图-->
			<view :class="params.style == 1 ? 'style1':'style0'" v-if="params.style == 1">
				<view class="item" v-for="(item,index) in params.list" :key="index" @click="goToDetailLink(item.roomid)">
					<view class="content">
						<view class="cover">
							<!-- #ifdef MP || APP-PLUS -->
							<image mode="widthFix" :lazy-load="true" :src="item.share_img" class="image"></image>
							<!-- #endif -->  
							<!-- #ifdef H5 -->  
							<img class="image" v-lazy="item.share_img">  
							<!-- #endif --> 
							<view class="status" v-if="item.live_status==101">
								<text class="live-player"></text>
								<text>直播中</text>
							</view>
							<view class="status" v-else>
								小直播
							</view>
						</view>
						<view class="info">
							<view class="title text-ellipsis">{{item.name}}</view>
							<view class="time-str">
								<view class="cn">开播时间：</view>
								<view class="time">{{item.start_time_str}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="openQrcode" type="center">
			<view class="open-qrcode">
				<!--小程序直播二维码-->
				<view class="content">
					<view class="title">扫描进入直播间</view>
					<view v-if="cdnUrl">
						<image class="image" :src="cdnUrl" mode="widthFix"></image>
					</view>
					<view v-else>
						加载中...
					</view>
				</view>
				<view class="close-icon" @click="closeQrcode()">
					<text class="iconfont">&#xe622;</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'MiniprogramLiveList',
		props: {
			title: {
				type: String,
				default: '小直播列表'
			},
			type: {
				type: String,
				default: 'miniprogram_live_list',
			},
			params: {
				type: Object,
				default: {},
			},
			config: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {
				linkMoreParams: {},
				showSale: this.util.setShowSale(),
				cdnUrl: '',   // H5端获取小程序直播二维码
			}
		},
		created() {
			//console.log(JSON.stringify(this.params))
			this.getLinkMoreParams();
		},
		methods: {
			/**
			 * IOS小程序判断显示购买价格及按钮
			 */
			setShowSale: function(){
				let systemInfo = uni.getStorageSync('systemInfo');
				this.showSale = true;
				//仅在微信小程序端执行
				// #ifdef MP-WEIXIN
				if(systemInfo.system.search("iOS") != -1){
					this.showSale = false;
					console.log('IOS')
				}
				// #endif
			},
			
			/**
			 * 获取链接参数
			 */
			getLinkMoreParams: function(){
				let linkMoreParams = {
					category_id : this.params.category_id,
					order_field : this.params.order_field,
					order_type: this.params.order_type,
				}
				//console.log(linkParams);
				this.linkMoreParams = linkMoreParams
			},
			
			/**
			 * 路由至页面
			 */
			goToMoreLink: function(){
				let params = this.linkMoreParams
				let urlParams = this.util.urlEncode(params)
				let url = '../miniprogram_live/lists?' + urlParams
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			
			/**
			 * 进入直播间
			 * @param {Object} id
			 */
			goToDetailLink: function(roomId){
				//let urlParams = 'id='+id
				let that = this
				// #ifdef MP-WEIXIN
				let url =  `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
				// #endif
				
				// #ifdef H5
				uni.showLoading({
				    title: '加载中'
				});
				let url = ''
					url = 'entry/site/miniprogram_live'
				let data = {}
					data.roomid = roomId
					data.action = 'shared_code'
				if(this.util.m == 'muu_classroom'){
					data.m = 'muu_classroom_plugin_livecourse'
				}
				if(this.util.m == 'muu_minishop'){
					data.m = 'muu_minishop'
				}	
				this.util.request({
					url : url,
					data : data,
					success(res) {
						console.log(res)
						uni.hideLoading();
						if(res.data.data.errcode){
							uni.showToast({
							    title: '直播间已关闭',
							    duration: 2000,
								icon: 'none'
							});
						}else{
							that.cdnUrl = res.data.data.cdnUrl
							console.log(that.cdnUrl)
							that.showQrcode()
						}
					},
					fail(res) {
						
					}
				})
				
				// #endif
			},
			
			/**
			 * 弹出小程序二维码
			 * @param {Object} id
			 */
			showQrcode: function(data){
				this.$refs.openQrcode.open()
			},
			
			/**
			 * 关闭小程序二维码
			 */
			closeQrcode: function(){
				this.$refs.openQrcode.close()
			},
		}
	}
</script>

<style lang="scss">
	.live-list {
		margin: 5px;
		.header {
			display: flex;
			justify-content: space-between;
			padding: 10rpx;
			margin: 10rpx 0;
			.title {
				flex: 1;
				font-size: 34rpx;
				font-weight: 700;
				color: #000;
			}
			.more {
				color: #999;
				font-size: 24rpx;
				line-height: 44rpx;
			}
		}
		/*横排*/
		.list.rank0 {
			
			/*小图*/
			.style0{
				display: flex;
				flex-wrap: wrap;
				.item {
					box-sizing:border-box;
					width: 50%;
					padding: 10rpx;
					.content {
						background-color: #fff;
						.cover {
							position: relative;
							border-radius: 10rpx;
							overflow: hidden;
							z-index: 2;
							.image {
								width: 100%;
								height: auto;
								display: block;
							}
						}
						.info {
							padding: 10rpx;
							.title {
								margin-top: 16rpx;
								font-size: 30rpx;
								color: #000;
								font-weight: 600;
								height: 72rpx;
								line-height: 36rpx;
							}
							.time-str {
								color: #4d4545;
								font-size: 26rpx;
								.cn {
									height: 32rpx;
									line-height: 32rpx;
								}
								.time {
									
								}
							}
						}
					}
				}
			}
		}
		/*竖排*/
		.list.rank1 {
			/*小图*/
			.style0{
				display: flex;
				flex-wrap: wrap;
				.item {
					width: 100%;
					.content {
						padding: 10rpx;
						display: flex;
						flex-wrap: wrap;
						.cover {
							position: relative;
							width: 280rpx;
							border-radius: 10rpx;
							overflow: hidden;
							z-index: 2;
							.image {
								width: 100%;
								height: auto;
								display: block;
							}
							
						}
						.info {
							padding-left: 20rpx;
							flex: 1;
							.title {
								font-size: 28rpx;
								color: #000;
								font-weight: 600;
								height: 72rpx;
								line-height: 36rpx;
							}
							.time-str {
								color: #4d4545;
								font-size: 26rpx;
								.cn {
									height: 32rpx;
									line-height: 32rpx;
								}
								.time {
									
								}
							}
						}
					}
				}
			}
			
			/*大图*/
			.style1{
				display: flex;
				flex-wrap: wrap;
				.item {
					width: 100%;
					.content {
						position: relative;
						min-height: 180rpx;
						margin: 10rpx;
						margin-bottom: 30rpx;
						box-shadow: 0 0 20rpx rgba(0,0,0,.12);
						border-radius: 10rpx;
						overflow: hidden;
						
						.cover {
							position: relative;
							border-radius: 10rpx;
							overflow: hidden;
							z-index: 2;
							.image {
								width: 100%;
								display: block;
							}
							.status {
								position:absolute;
								top: 20rpx;
								right: 20rpx;
								background-color:rgba(0,0,0,.5);
								color:#fff;
								padding: 4rpx 10rpx;
								border-radius:10rpx;
								font-size: 24rpx;
								z-index: 3;
								.live-play {
									display: inline-block;
									width: 6px;
									height: 6px;
									background-color: green;
									border-radius: 50%;
									margin-right: 5px;
									vertical-align: middle;
								}
							}
						}
						.info {
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							padding: 20rpx;
							background-color: rgba(255,255,255,0.9);
							z-index: 3;
							.title {
								font-size: 32rpx;
								color: #000;
								font-weight: 700;
								line-height: 80rpx;
							}
							.time-str {
								color: #4d4545;
								font-size: 28rpx;
								.cn {
									display: inline-block;
									height: 32rpx;
									line-height: 32rpx;
								}
								.time {
									display: inline-block;
								}
							}
						}
					}
				}
			}
		}
	}
	
	.open-qrcode {
		
		.content {
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			width: 480rpx;
			padding: 20rpx;
			.title {
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 52rpx;
			}
			.image {
				max-width: 100%;
			}
		}
		.close-icon {
			padding-top: 32rpx;
			text-align: center;
			color: #fff;
			.iconfont {
				font-size: 64rpx;
			}
		}
	}
	
	/*页面风格设计*/
	.Blue {

	}
	.Green {

	}
	.LightRed {

	}
	.Orange {

	}
	.LightPink {

	}
	.Magenta {

	}
</style>
